<template>
  <el-container v-loading="loading">
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        prop="order_no"
        label="订单号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="nickname"
        label="下单人昵称"
        width="180">
      </el-table-column>

      <el-table-column
        prop="phone"
        label="联系电话"
        width="250">
      </el-table-column>

      <el-table-column
        prop="about_time"
        label="预约时间"
        width="180">
      </el-table-column>

      <el-table-column
        prop="passenger_name"
        label="乘车人姓名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="passenger_phone"
        label="乘车人电话"
        width="180">
      </el-table-column>

      <el-table-column
        prop="real_name"
        label="代驾姓名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="work_phone"
        label="代驾手机号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="start_point"
        label="开始行程地址"
        width="180">
      </el-table-column>

      <el-table-column
        prop="end_point"
        label="结束行程地址"
        width="180">
      </el-table-column>

      <el-table-column
        prop="start_adds"
        label="起点"
        width="180">
      </el-table-column>

      <el-table-column
        prop="target_adds"
        label="终点"
        width="180">
      </el-table-column>

      <el-table-column
        prop="apart"
        label="预估里程"
        width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.apart }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="actual_km"
        label="实际里程"
        width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.actual_km }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="actual_price"
        label="实际产生费用"
        width="250">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.actual_price }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="pay_price"
        label="实际支付费用"
        width="250">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.pay_price }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="is_pay"
        label="支付"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_pay==0">待支付</el-tag>
          <el-tag v-if="scope.row.is_pay==1">支付</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="pay_type"
        label="支付类型"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pay_type==1">微信</el-tag>
          <el-tag v-if="scope.row.pay_type==2">余额</el-tag>
          <el-tag v-if="scope.row.pay_type==3">现金支付</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="is_send"
        label="接单状态"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_send==0">待接单</el-tag>
          <el-tag v-if="scope.row.is_send==1">已接单</el-tag>
          <el-tag v-if="scope.row.is_send==2">已取消</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="type"
        label="订单类型"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==0">自己叫车</el-tag>
          <el-tag v-if="scope.row.type==1">帮朋友叫车</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="is_service"
        label="服务状态"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_service == '0'">待出发</el-tag>
          <el-tag v-if="scope.row.is_service == '1'">出发</el-tag>
          <el-tag v-if="scope.row.is_service == '2'">到达目的地</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="apply_remarks"
        label="代驾取消订单原因"
        width="180">
      </el-table-column>

      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180">
        <template slot-scope="scope">
          <i class="fa fa-clock-o fa-fw"></i>
          <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.per_page"
      :page-size="pagination.per_page"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
	import api from '@/fetch/api.js'
  export default {
    mounted: function () {
			console.log(api.baseUrlPrefix)
      this.getData();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData: function () {
        let _this = this;
        this.api.getDistributionOrder({
          page: this.pagination.currentPage,
          p: this.pagination.pageSize,
		  order_no:this.card_no,
		  time_area:this.times,
          // uid: this.constraintForm.uText != '' ? this.constraintForm.uid : '',
          // rid: this.constraintForm.rText != '' ? this.constraintForm.rid : '',
          // class_id: this.constraintForm.class_id,
          // type: this.constraintForm.type,
          // pay_time: this.constraintForm.pay_time.length > 0 ? this.constraintForm.pay_time[0] + '-' + this.constraintForm.pay_time[1] : 0
        }).then(function (res) {
          if (res.code == 1) {
            // for (let i = 0; i < res.data.data.length; i++) {
            //   res.data.data[i].is_send = res.data.data[i].is_send.toString();
            //   res.data.data[i].is_service = res.data.data[i].is_service.toString();
            //   res.data.data[i].type = res.data.data[i].type.toString();
            //   res.data.data[i].is_pay = res.data.data[i].is_pay.toString();
            //   res.data.data[i].pay_type = res.data.data[i].pay_type.toString();
            // }
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
     
      /**
       * 数据刷新
       */
    //   handleRefresh: function () {
				// this.order_time=''
				// this.pagination.currentPage= 1
				// this.card_no=''
				// this.times=''
    //     this.getData();
    //     this.$message({
    //       showClose: true,
    //       message: '刷新成功',
    //       type: 'success'
    //     });
    //   },
      /**
       * 表格选中状态记录
       * @param val
       */
      // handleSelectionChange(val) {
      //   this.multipleSelection = val;
      // },
      /**
       * 获取时间
       * @param type
       */
      getTimed: function () {
        const start = new Date();
        const end = new Date();
        let day = 0;
        if (this.constraintForm.timeType == '2') {
          day = 7;
        } else if (this.constraintForm.timeType == '3') {
          day = 30;
        } else if (this.constraintForm.timeType == '4') {
          day = 90;
        }
        if (this.constraintForm.timeType == '2' || this.constraintForm.timeType == '3' || this.constraintForm.timeType == '4') {
          start.setTime(start.getTime() - 3600 * 1000 * 24 * day);
          let timeArr = [];
          timeArr.push(start.getTime());
          timeArr.push(end.getTime());
          this.constraintForm.pay_time = timeArr;
        } else if (this.constraintForm.timeType == '1' || this.constraintForm.timeType == '5') {
          this.constraintForm.pay_time = [];
        }
      },
    
   
			// seach_btn(){
			// 	if(!this.card_no){
			// 		this.$message({
			// 		  showClose: false,
			// 		  message: '订单编号不能为空',
			// 		  type: 'warning',
			// 			duration:1000
			// 		});
			// 		return false;
			// 	}
			// 	this.order_time=''
			// 	this.pagination.currentPage= 1
			// 	this.times=''
			// 	this.getData();
			// },
			// download_btn(){
			// 	if(!this.order_time){
			// 		this.pagination.currentPage=1
			// 		this.card_no = ''
			// 		this.times = ''
			// 		this.getData();
			// 	}else{
			// 		let times=this.order_time[0]+'~'+this.order_time[1]
			// 		this.pagination.currentPage=1
			// 		this.times = times 
			// 		this.card_no = ''
			// 		this.getData();
			// 	}
			// }
    },
    data() {
      return {
		times:'',
		url:api.baseUrlPrefix,
		order_time:'',
		card_no:'',
        loading: true,  // 页面加载
        tableData: [
          // {
          //   "id":16,                //类型：Number  必有字段  备注：订单id
          //   "name":"熊二",                //类型：String  必有字段  备注：姓名
          //   "phone":"15111111111",                //类型：String  必有字段  备注：电话
          //   "uid":18,                //类型：Number  必有字段  备注：关联用户
          //   "rid":0,                //类型：Number  必有字段  备注：跑腿id
          // "runner":{                //类型：Object  必有字段  备注：跑腿
          //      "name":"帅哥"                //类型：String  必有字段  备注：跑腿人员名
          //  },
          // "confirm_code":"mock",                //类型：String  必有字段  备注：收货码
          //   "order_no":"2018090319111523994666",                //类型：String  必有字段  备注：订单号
          //   "pic":"mock",                //类型：String  必有字段  备注：图片路径
          //   "pics":"mixed",                //类型：Mixed  必有字段  备注：图片合集
          //   "voice":"mock",                //类型：String  必有字段  备注：语音路径
          //   "goods":"美食",                //类型：String  必有字段  备注：商品名
          //   "class_id":1,                //类型：Number  必有字段  备注：1帮我买2帮我送3带排队4代驾5家政6代办
          //   "total_price":"34.86",                //类型：String  必有字段  备注：订单总费用
          //   "pay_price":"32.22",                //类型：String  必有字段  备注：实际支付费用
          //   "weight":0,                //类型：Number  必有字段  备注：重量
          //   "start_adds":"陕西省西安市未央区未央路60号qweqw",                //类型：String  必有字段  备注：起始位置
          //   "start_adds_location":{                //类型：Object  必有字段  备注：起始经纬度
          //     "lng":108.95323064451,                //类型：Number  必有字段  备注：无
          //     "lat":34.301103430993                //类型：Number  必有字段  备注：无
          //   },
          //   "target_adds":"陕西省西安市未央区凤城八路",                //类型：String  必有字段  备注：目标位置
          //   "target_adds_location":{                //类型：Object  必有字段  备注：目标坐标
          //     "lng":108.95323064451,                //类型：Number  必有字段  备注：无
          //     "lat":34.301103430993                //类型：Number  必有字段  备注：无
          //   },
          //   "remark":"adaqeq",                //类型：String  必有字段  备注：备注
          //   "pay_time":"mock",                //类型：String  必有字段  备注：下单时间
          //   "expect_time":"1970-01-01 08:11:06",                //类型：String  必有字段  备注：期待送达时间
          //   "bargaining":1,                //类型：Number  必有字段  备注：是否接收议价0否，1是
          //   "is_service":"mock",                //类型：String  必有字段  备注：确认送达
          //   "service_time":"mock",                //类型：String  必有字段  备注：确认送达时间
          //   "pay_type":"mock",                //类型：String  必有字段  备注：支付方式1是微信2是余额
          //   "apart":"mock",                //类型：String  必有字段  备注：距离
          //   "secure_price":"mock",                //类型：String  必有字段  备注：保证金
          //   "apply_delete":"mock",                //类型：String  必有字段  备注：申请取消订单
          //   "apply_time":"mock",                //类型：String  必有字段  备注：申请取消时间
          //   "is_send":"mock",                //类型：String  必有字段  备注：0未接单，1已接单
          //   "send_time":"mock",                //类型：String  必有字段  备注：接单时间
          //   "reward_price":"mock",                //类型：String  必有字段  备注：跑腿人员红包
          //   "user":{                //类型：Object  必有字段  备注：关联用户
          //     "id":18,                //类型：Number  必有字段  备注：uid
          //     "nickname":"在水一方",                //类型：String  必有字段  备注：昵称
          //     "member_grade":2                //类型：Number  必有字段  备注：等级
          //   }
          // },
        ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 100],
        },
        constraintForm: {
          uid: '',		// 	用户id，默认0，会员用户-》用户列表-》获取用户名查询列表
          uText: '', //  用户名称字符
          rid: '',		// 	跑腿id，默认0，服务人员-》服务人员评价-》获取服务人员名称模糊查询列表
          rText: '', //  服务人员名称字符
          class_id: '0',	// 1帮我买2帮我送3带排队4代驾5家政6代办，默认0
          type: '0',	// 	1：待付款 2：代发货 3：已发货待收货 4：已完成 5：用户取消 ,默认0
          pay_time: '',	// 下单时间默认0，'-'分隔时间戳，没有毫秒
          timeType: '1',   // 时间类型 1=>不限 2=>近一周 3=>近一月 4=>近三月 5=>自定义
        }
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .autocomplete-group {
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
  }
</style>
